<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/10/9
  Time: 16:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
        .cost_inner_style {
            border: 0;
            min-height: 410px;
            width: 950px;
            padding: 5px;
            margin-top: 5px;
            max-height: 550px;
            overflow-x: hidden;
            overflow-y: auto;
            position: relative;
            background: white;
        }
    </style>
    <title>fee</title>
    <link type="text/css" rel="stylesheet" media="all" href="<%=request.getContextPath()%>/styles/global.css"/>
    <link type="text/css" rel="stylesheet" media="all" href="<%=request.getContextPath()%>/styles/global_color.css"/>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>


</head>
<body>
<!--Logo区域开始-->
<div id="header">
    <img src="../images/logo.png" alt="logo" class="left"/>
    <a href="<%=request.getContextPath()%>/admins/exit">[退出]</a>
</div>
<!--Logo区域结束-->
<div id="navi">
    <c:import url="../navigation.jsp"/>
    <script>
        var li = document.getElementById("menu").children;
        var title = document.getElementsByTagName('title')[0].textContent;
        for (let i = 0; i < li.length; i++) {
            if (li[i].children[0].className.startsWith(title)){
                li[i].children[0].className = title + '_on';
            }
        }
    </script>
</div>
<!--导航区域结束-->
<!--主要区域开始-->
<!--转换页面方法-->
<script>
    //排序按钮的点击事件
    function sort(btnObj) {
        var trArray = document.getElementById("datalist").getElementsByClassName("test");
        var index = 0;
        if (btnObj.value === "时长") {
            index = 2;
        } else if (btnObj.value === "基费") {
            index = 3;
        }
        if (btnObj.className === "sort_desc") {
            btnObj.className = "sort_asc";
            for (var i = 0; i < trArray.length - 1; i++) {
                for (var j = 0; j < trArray.length - 1 - i; j++) {
                    if (parseInt(trArray[j].childNodes[index].textContent) > parseInt(trArray[j + 1].childNodes[index].textContent)) {
                        trArray[0].parentNode.insertBefore(trArray[j + 1], trArray[j]);
                    }
                }
            }
        }
        else {
            btnObj.className = "sort_desc";
            for (var i = 0; i < trArray.length - 1; i++) {
                for (var j = 0; j < trArray.length - 1 - i; j++) {
                    if (parseInt(trArray[j].childNodes[index].textContent) < parseInt(trArray[j + 1].childNodes[index].textContent)) {
                        trArray[0].parentNode.insertBefore(trArray[j + 1], trArray[j]);
                    }
                }
            }
        }
    }

    //启用
    function startFee(o) {
        var r = window.confirm("确定要启用此资费吗？资费启用后将不能修改和删除。");
        var td = o.parentElement.parentElement.childNodes;
        var url = "/fee_startOne?costId=" + td[0].textContent;
        $.get(url);
        document.getElementById("operate_result_info").style.display = "block";
        document.getElementById("operate_result_info").textContent = "启用成功";
        window.setTimeout(function () {
            document.getElementById("operate_result_info").style.display = "none";
        }, 3000);
        location.reload();
    }


    //删除
    function deleteFee(o) {
        var r = window.confirm("确定要删除此资费吗？");
        var td = o.parentElement.parentElement.childNodes;
        var url = "/fee_deleteOne?costId=" + td[0].textContent;
        $.get(url);
        // o.parentElement.parentElement.style.display = "none";
        document.getElementById("operate_result_info").style.display = "block";
        document.getElementById("operate_result_info").textContent = "删除成功";
        window.setTimeout(function () {
            document.getElementById("operate_result_info").style.display = "none";
        }, 3000);
        location.reload();
    }

    function change_back() {
        document.getElementById("show_cost").style.display = "none";
        document.getElementById("main").style.display = "block";
        document.getElementById("update_one").style.display = "none";
    }


</script>
<!--修改页面-->
<div class="cost_inner_style" id="update_one" style="display: none">
    <%@include file="fee_modi.jsp" %>
</div>
<!--单个信息页面-->
<div class="cost_inner_style" id="show_cost" style="display: none">
    <%@include file="fee_detail.jsp" %>
</div>
<!--所有信息页面-->
<div id="main">
    <form action="" method="">
        <!--排序-->
        <div class="search_add">
            <div>
                <!--<input type="button" value="月租" class="sort_asc" onclick="sort(this);" />-->
                <input type="button" value="时长" class="sort_asc" onclick="sort(this);"/>
                <input type="button" value="基费" class="sort_asc" onclick="sort(this);"/>
            </div>
            <input type="button" value="增加" class="btn_add" onclick="location.href='fee_add.jsp';"/>
        </div>
        <!--启用操作的操作提示-->
        <div id="operate_result_info" class="operate_success">
            <img src="../images/close.png" id="result_img"/>
        </div>
        <!--数据区域：用表格展示数据-->
        <div id="data">
            <table id="datalist">
                <script>
                    $(function () {
                        var url = "/fee_list1?start=0&count=7";
                        var url1 = "/fee_list_page?currentPage=1";
                        $.get(url, result);
                        $.get(url1, page);
                    });

                    function result(resp) {
                        var table = $('#datalist');
                        table.empty();
                        var table_th = $('<tr id="table_th">\n' +
                            '<th>资费ID</th>\n' +
                            '<th class="width100">资费名称</th>\n' +
                            '<th>基本时长</th>\n' +
                            '<th>基本费用</th>\n' +
                            '<th>单位费用</th>\n' +
                            '<th>创建时间</th>\n' +
                            '<th>开通时间</th>\n' +
                            '<th class="width50">状态</th>\n' +
                            '<th class="width200"></th>\n' +
                            '</tr>');
                        table.append(table_th);
                        for (var item of resp) {
                            let status = "";
                            let display = "";
                            switch (item.status) {
                                case "1":
                                    status = "启用";
                                    display = 'style="display:none"';
                                    break;
                                case "0":
                                    status = "暂停";
                                    display = 'style="display:inline"';
                                    break;
                            }
                            var tr = $('<tr class="test"></tr>');
                            var td_id = '<td>' + item.costId + '</td>';
                            var td_name = '<td><a href="javascript:;" onclick="change_show_one(this)">' + item.name + '</a></td>';
                            var td_baseDuration = '<td>' + item.baseDuration + '小时' + '</td>';
                            var td_baseCost = '<td>' + item.baseCost + '元' + '</td>';
                            var td_unitCost = '<td>' + item.unitCost + '元/小时' + '</td>';
                            var td_status = '<td>' + status + '</td>';
                            var td_descr = '<td style="display: none">' + item.descr + '</td>';
                            var td_creatime = '<td>' + item.creatime + '</td>';
                            var td_startime = '<td>' + item.startime + '</td>';
                            var td_costType = '<td style="display:none">' + item.costType + '</td>';
                            var td_c = '<td>' +
                                '<input ' + display + 'type="button" value="启用" class="btn_start" onclick="startFee(this)"/>' +
                                '<input ' + display + 'type="button" value="修改" class="btn_modify" onclick="change_update_one(this)" />' +
                                '<input ' + display + 'type="button" value="删除" class="btn_delete" onclick="deleteFee(this);" />' +
                                '</td>';
                            table.append(tr);
                            tr.append(td_id)
                                .append(td_name)
                                .append(td_baseDuration)
                                .append(td_baseCost)
                                .append(td_unitCost)
                                .append(td_creatime)
                                .append(td_startime)
                                .append(td_status)
                                .append(td_c)
                                .append(td_costType)
                                .append(td_descr);
                        }
                    }

                    function page(resp) {
                        var div_page = $('#pages');
                        div_page.empty();
                        var currentPage = resp.currentPage;
                        var totalPage = resp.totalPage;
                        var lastCount = (currentPage - 2) * 7;
                        var nextCount = currentPage * 7;
                        var lastPageCount = currentPage - 1;
                        var nextPageCount = currentPage + 1;

                        var lastPage = '<a id="lastPage" href="javascript:;" onclick="$.get(\'/fee_list1?start=' +
                            lastCount + '&count=7\', result);$.get(\'/fee_list_page?currentPage=' +
                            lastPageCount + '\', page)">上一页</a>';
                        div_page.append(lastPage);

                        for (var i = 1, start = 0; i < 1 + totalPage / 7; i++) {
                            var a = '<a href="javascript:;" onclick="$.get(\'/fee_list1?start=' +
                                start + '&count=7\', result);$.get(\'/fee_list_page?currentPage=' +
                                i + '\', page)">' + i + '</a>';
                            div_page.append(a);
                            start += 7;
                        }

                        var nextPage = '<a id="nextPage" href="javascript:;" onclick="$.get(\'/fee_list1?start=' +
                            nextCount + '&count=7\', result);$.get(\'/fee_list_page?currentPage=' +
                            nextPageCount + '\', page)">下一页</a>';
                        div_page.append(nextPage);
                        if (currentPage === 1) document.getElementById('lastPage').style.display = 'none';
                        if (currentPage >= totalPage / 7) document.getElementById('nextPage').style.display = 'none';

                        for (var i = 0; i < totalPage / 7 + 1; i++) {
                            var page = document.getElementById('pages').children[i + 1];
                            if (page.textContent == currentPage) {
                                page.className = "current_page";
                            }
                        }
                    }
                </script>
            </table>
            <p>业务说明：<br/>
                1、创建资费时，状态为暂停，记载创建时间；<br/>
                2、暂停状态下，可修改，可删除；<br/>
                3、开通后，记载开通时间，且开通后不能修改、不能再停用、也不能删除；<br/>
                4、业务账号修改资费时，在下月底统一触发，修改其关联的资费ID（此触发动作由程序处理）
            </p>
        </div>
        <!--分页-->
        <div id="pages">
        </div>
    </form>
</div>
<!--主要区域结束-->
<div id="footer">
    <p>[源自北美的技术，最优秀的师资，最真实的企业环境，最适用的实战项目]</p>
    <p>版权所有(C)云科技有限公司</p>
</div>
</body>
</html>

